<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Career Builder</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <a href="index.html">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#ABOUT">ABOUT</a></li>
                <li><a href="#GALLERY">GALLERY</a></li>
                <li><a href="#">FACULTY</a></li>
                <li><a href="#">EVENTS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </header>
    <!-- banner板块 -->
    <div class="banner">
        <div class="search">
            <input type="text" placeholder=" your Name">
            <input type="text" placeholder=" your Phone">
            <input type="text" placeholder=" your Email">
            <textarea name="" id="" cols="30" rows="5" placeholder=" Write Your Comment Here"></textarea>
            <a href="#">SENDMESSAGE</a>
        </div>
    </div>
    <!-- ABOUT -->
    <div class="ABOUT">
        <div class="hd">
            <a href="#" id="ABOUT">ABOUT</a>
            <div class="hx"></div>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry.Lorem Ipsum has been the industry's standard dummy</p>
            <p>text ever since 1500s</p>
        </div>
        <div class="bd">
            <div class="left-hd">
                <h1>A WORD</h1>
                <h1>ABOUT US</h1>
            </div>
            <div class="left-bd"></div>
            <div class="wz">
                <p>Praesent dignissim viverra est,sed</p>
                <p>bibendum ligula congue non.Sed ac nisl</p>
                <p>et felis gravida commodo?Suspendisse</p>
                <p>eget ullamcorper ipsum.Suspendisse</p>
                <p>diam amet</p>
                <a href="#">EXPLORE</a>
            </div>
            <div class="center">
                <img src="images/bb3.jpg" alt="">
            </div>
            <div class="right">
                <ul>
                    <li>
                        <h1>70000</h1>
                        <div class="hx"></div>
                        <p>Students</p>
                    </li>
                    <li>
                        <h1>600</h1>
                        <div class="hx"></div>
                        <p>Faculty</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- nav -->
    <nav>
        <ul>
            <li>
                <a href="#" class="tp">
                    <img src="images/b1.jpg" alt="">
                    <div class="sanjiao-left"></div>
                </a>
            </li>
            <li>
                <h1>Library</h1>
                <p class="first">Lorem Ipsum is simply dummy text of the
                    printing and typesetting industry
                </p>
                <p>Lorem ipsum has been the industry's standard dummy
                    text ever since the 1500s,when an unknown printer took
                    a galley of type and scrambled it to make a type 
                    specimen book
                </p>
                <a href="#" class="an">EXPLORE</a>
            </li>
            <li>
                <a href="#" class="tp">
                    <img src="images/b2.jpg" alt="">
                    <div class="sanjiao-left"></div>
                </a>
            </li>
            <li>
                <h1>Computer Lab</h1>
                <p class="first">Lorem Ipsum is simply dummy text of the
                    printing and typesetting industry
                </p>
                <p>Lorem ipsum has been the industry's standard dummy
                    text ever since the 1500s,when an unknown printer took
                    a galley of type and scrambled it to make a type 
                    specimen book
                </p>
                <a href="#" class="an">EXPLORE</a>
            </li>
            <!--  -->
            <li>
                <h1>Conference Hall</h1>
                <p class="first">Lorem Ipsum is simply dummy text of the
                    printing and typesetting industry
                </p>
                <p>Lorem ipsum has been the industry's standard dummy
                    text ever since the 1500s,when an unknown printer took
                    a galley of type and scrambled it to make a type 
                    specimen book
                </p>
                <a href="#" class="an">EXPLORE</a>
            </li>
            <li>
                <a href="#" class="tp">
                    <img src="images/b3.jpg" alt="">
                    <div class="sanjiao-right"></div>
                </a>
            </li>
            <li>
                <h1>Play Ground</h1>
                <p class="first">Lorem Ipsum is simply dummy text of the
                    printing and typesetting industry
                </p>
                <p>Lorem ipsum has been the industry's standard dummy
                    text ever since the 1500s,when an unknown printer took
                    a galley of type and scrambled it to make a type 
                    specimen book
                </p>
                <a href="#" class="an">EXPLORE</a>
            </li>
            <li>
                <a href="#" class="tp">
                    <img src="images/b4.jpg" alt="">
                    <div class="sanjiao-right"></div>
                </a>
            </li>
        </ul>
    </nav>
    <!-- GALLERY -->
    <div class="GALLERY">
        <div class="hd">
            <a href="#" id="GALLERY">GALLERY</a>
            <div class="hx"></div>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry.Lorem Ipsum has been the industry's standard dummy</p>
            <p>text ever since 1500s</p>
        </div>
        <div class="bd">
            <ul>
                <li>
                    <div class="tp">
                        <img src="images/03-01.jpg" alt="">
                    </div>
                    <a href="#">  SCIENCE LAB</a>
                </li>
                <li>
                    <div class="tp">
                        <img src="images/03-02.jpg" alt="">
                    </div>
                    <a href="#">   INDOOR STADIUM</a>
                </li>
                <li>
                    <div class="tp">
                        <img src="images/03-03.jpg" alt="">
                    </div>
                    <a href="#">  TRANSPORTATION</a>
                </li>
                <li>
                    <div class="tp">
                        <img src="images/03-04.jpg" alt="">
                    </div>
                    <a href="#">  KIDS ROOM</a>
                </li>
                <li>
                    <div class="tp">
                        <img src="images/03-05.jpg" alt="">
                    </div>
                    <a href="#">  MEDIAION CLASSES</a>
                </li>
                <li>
                    <div class="tp">
                        <img src="images/03-06.jpg" alt="">
                    </div>
                    <a href="#">  KIDS PLAY GROUND</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer -->
    <footer>
        @2016 imooc.coom 京ICP备130466642号
    </footer>
</body>

</html>